<template>
	<view class="flex-col page">
		<view class="flex-col group_4">
			<view class="flex-col group_5">
				<view class="flex-col">
					<view class="flex-col text-wrapper">
						<text class="text_1">
							此结果仅为参考工期，巡检服务、全流程咨询及全流程管家服务的用户请在我家总览或个人中心-我的项目中查看巡检更新的动态进度。（巡检或工长修正工期后不同步到小工具里的工期测算）
						</text>
					</view>
					<view class="flex-col section_1">
						<view class="flex-col items-start text-wrapper_1"><text class="text_2">我的房屋信息</text></view>
						<view class="flex-col group_7">
							<view class="justify-between">
								<text class="text_3">房屋所在区域</text>
								<text class="text_4">{{ address }}</text>
							</view>
							<view class="flex-col group_9">
								<view class="justify-between">
									<text class="text_5">房屋面积（m²）</text>
									<text class="text_6">{{ roomArea }}m²</text>
								</view>
								<view class="justify-between group_11">
									<text class="text_7">房屋户型</text>
									<text class="text_8">{{ roomTypeName }}</text>
								</view>
							</view>
							<view class="justify-between group_12">
								<text class="text_9">开始时间</text>
								<view>
									<u-datetime-picker ref="datetimePicker" :minDate="Date.now()" itemHeight="60" :show="show"
										v-model="value1" mode="date" :formatter="formatter" @confirm="confirm"
										@cancel="cancel"></u-datetime-picker>
								</view>
								<view class="flex-row group_13" @click="show = true">
									<text>{{ new_time }}</text>
									<image
										src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868233134907692.png"
										class="image_5" />
								</view>
							</view>
						</view>
					</view>
					<view class="flex-col section_1" v-if="new_time">
						<view class="flex-col items-center button"><text class="text_11">施工进度</text></view>
						<view class="justify-between group_14" @click="shows = true">
							<text class="text_12">等级类别：</text>
							<view>
								<!-- <u-picker @click="show = true"  :columns="columns" @doconfirm="doconfirm" @docancel="docancel"
									 title="选择等级级别"></u-picker> -->
								<u-picker v-if="columns.length>0" itemHeight="60" v-model="value2" :show="shows"
									:columns="columns" keyName="decorationGradeName" @confirm="doconfirm"
									@cancel="docancel"></u-picker>
								<!-- <u-picker  :columns="columns"></u-picker>
		<u-button @click="show = true">打开</u-button> -->
							</view>
							<view class="flex-row">
								<text class="text_13">{{columns_type}}</text>
								<image :src="imgUrl+'16557838861113221762.png'" class="image_6" />
							</view>
						</view>
						<view class="flex-col group_16">
							<view class="flex-col group_17">
								<view class="justify-between">
									<text class="text_14">总施工时间：</text>
									<text class="text_15">{{process.constructionTime}}</text>
								</view>
								<view class="justify-between group_19">
									<text class="text_16">总工时：</text>
									<text class="text_17">{{process.constructionDuration}}个工作日</text>
								</view>
							</view>
							<view class="flex-col group_20">
								<view class="justify-between">
									<text class="text_18">总月数（约）:</text>
									<text class="text_19">{{process.constructionMonth}}个月</text>
								</view>
								<view class="justify-between group_22">
									<text class="text_20">其中硬装工时：</text>
									<text class="text_21">{{process.constructionHardDuration}}个工作日</text>
								</view>
							</view>
							<view class="justify-between group_23">
								<text class="text_22">硬装月数（约）：</text>
								<text class="text_23">{{process.constructionHardMonth}}个月</text>
							</view>
							<view class="divider">
								<!--*-->
							</view>

							<shop-project :list="process.constructionPlanList"></shop-project>
						</view>
					</view>
				</view>
				<text class="text_46" v-if="new_time" @click="go('/pages/tool/material?status=0')">进入关联主材订装查阅</text>
			</view>
			<view class="flex-col items-center button_1" @click="submit"><text class="text_47">保存</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show: false,
				shows: false,
				value1: '',
				value2: '',
				new_time: '',
				roomTypeName: '',
				roomArea: '',
				district: '',
				address: '',
				projectId: '',
				process: {},
				columns: [

				],
				infoDetails:{},
				family: {},
				columns_type: '',
				imgUrl: this.$IMG_URL,

			}

		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad() {
			this.columns_type = this.value2;
			this.getProcess()
			this.doconfirm()
		},
		onShow() {
			this.$store.dispatch('checkHouse');
			this.rooms();
			this.getFamily();
			this.getData();
		},
		async created() {
			await this.getGrade()
		},
		methods: {
			getData() {
				console.log(111);
				this.$http('check.generateprojectId').then(r => {
					if (r.code == 200) {
						this.process = r.data
						// console.log(this.process,'sad');
						this.columns_type = r.data.gradeType;
						this.new_time = r.data.startTime
						this.value1 = (new Date(r.data.startTime)).getTime()
						
					}
				})

			},
			getGrade() {
				this.$http('check.grade').then(r => {
					if (r.code == 200) {
						this.columns = [r.data];
						
					}
				});
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},

			doconfirm(e) {
				console.log(e);
				this.columns_type = e.value[0].decorationGradeName
				let info = {
					roomArea: this.roomArea,
					startTime: this.new_time,
					projectId: this.projectId,
					gradeType: this.columns_type
				}
				this.getProcess(info);
				this.shows = false;
			},
			docancel(e) {
				this.shows = false;
			},
			cancel(e) {
				this.show = false
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat
				this.new_time = timeFormat(e.value, 'yyyy-mm-dd')
				this.show = false;
				let info = {
					roomArea: this.roomArea,
					startTime: timeFormat(e.value, 'yyyy-mm-dd'),
					projectId: this.projectId,
					gradeType: this.columns_type
				}
				this.getProcess(info);
			},
			getProcess(info) {
				//请求接口
				this.$http('harryroom.generate', info).then(r => {
					if (r.code == 200) {
						this.process = r.data;
						this.columns_type = r.data.gradeType;
					
					}
				});
			},
			rooms() {
				this.$http('harryroom.queryHousing').then(r => {
					if (r.code == 200) {
						this.roomTypeName = r.data.project.roomTypeName
						this.roomArea = r.data.project.roomArea
						this.district = r.data.project.district
						this.address = r.data.project.cityName + r.data.project.districtName + r.data
							.project
							.position
						this.projectId = r.data.project.projectId
					} else {
						// this.$u.toast(r.msg);
					}
				});
			},
			getFamily() {
				this.$http('lhouse.query').then(r => {
					if (r.code == 200) {
						this.family = r.data.project;
						
					}
				});
			},
			submit() {
				if (!this.new_time) {
					this.$u.toast('请首先选择开始时间');
					return;
				} else {

					this.$http('check.add', {
						isDisplay: 1
					}).then(r => {
						if (r.code === 200) {
							this.$u.toast('保存成功');
							uni.navigateBack({
								delta: 1
							})
						} else {
							this.$u.toast('保存失败,请重试!')
						}

						// uni.navigateTo({ 
						// 	url:'pages/index/index'
						// })

					});
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.section_1 {
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100vw;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group_4 {
		padding: 0 24rpx 40rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_5 {
		padding: 19rpx 0 41rpx;
	}

	.button_1 {
		margin: 0 8rpx;
		padding: 25rpx 0 25rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.text_46 {
		margin-left: 8rpx;
		margin-top: 30rpx;
		align-self: flex-start;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_47 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text-wrapper {
		padding: 32rpx 0 60rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_1 {
		margin-left: 24rpx;
		margin-right: 31rpx;
		color: #191919;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 44rpx;
		text-align: left;
	}

	.text-wrapper_1 {
		padding: 29rpx 0 35rpx;
		background-color: #ebf2ff;
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.group_7 {
		padding: 30rpx 22rpx 35rpx 24rpx;
	}

	.button {
		// padding: 20rpx 0 32rpx;
		height: 90rpx;
		background-color: #1d6aff1a;
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.group_14 {
		// padding: 30rpx 24rpx 39rpx;
		padding: 0rpx 24rpx 0;
		height: 90rpx;
		display: flex;
		align-items: center;
	}

	.group_16 {
		padding: 0 22rpx 33rpx 24rpx;
	}

	.text_2 {
		margin-left: 24rpx;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_9 {
		margin-top: 39rpx;
	}

	.group_12 {
		margin-top: 39rpx;
	}

	.text_11 {
		color: #191919;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-family: '.AppleSystemUIFont';
	}

	.text_12 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_17 {
		padding-top: 31rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.group_20 {
		margin-top: 39rpx;
	}

	.group_23 {
		margin-top: 39rpx;
	}

	.divider {
		margin-top: 41rpx;
		background-color: #eeeeee;
		border-radius: 0.5rpx;
		height: 1rpx;
	}



	.text_3 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_4 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_11 {
		margin-top: 33rpx;
	}

	.text_9 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_13 {
		// margin-top: 6rpx;
	}

	.text_13 {
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_6 {
		margin-left: 23rpx;
		margin-top: 5rpx;
		flex-shrink: 0;
		width: 14rpx;
		height: 26rpx;
	}

	.group_19 {
		margin-top: 33rpx;
	}

	.group_22 {
		margin-top: 33rpx;
	}

	.text_22 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_23 {
		margin-right: 5rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}




	.text_5 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_6 {
		margin-top: 6rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_10 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_5 {
		margin-top: 3rpx;
		margin-left: 14rpx;
		flex-shrink: 0;
		width: 30rpx;
		height: 32rpx;
	}

	.text_14 {
		margin-bottom: 6rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_15 {
		margin-top: 6rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_16 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_17 {
		margin-right: 5rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_18 {
		margin-top: 6rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_19 {
		margin-right: 4rpx;
		margin-bottom: 6rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_20 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_21 {
		margin-right: 5rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}
</style>
